技術筆記

昨天聊完最簡易版的Jest，先喘口氣跳出環境建置，來點Javascript入門好玩的東西，簡單介紹其型別，最後做個強制轉型的整理。

型別

• 字串(string)

  • 可用單引號或雙引號表示，但必須成對，否則會報錯
  • 字串可以相加

  const hello = "Hello"
  const name = "Julia"
  
  const sayHello = hello + name
  console.log(sayHello) //Hello Julia
  

  • 字串模板：變數很多時，單純相加，程式碼會很醜，用這個ES6後的新寫法會簡潔很多

  let customerName = "Julia"
  const introContext = `Hello, my name is ${customerName}.`
  console.log(introContext)  //Hello, my name is Julia.
  

• 數值(number)：包含一般數值與NaN

  • NaN(not a number): 如果型別無法成功被轉為數值；無法正常計算結果，JavaScript就會回傳NaN

• 布林值(boolean)：即true & false

• 未定義(undefined):一個變數被宣告但沒有被賦值，預設值就是undefined

• 物件(object)

  • 空集合(null):刻意要讓變數值是空的時候使用，null的型別是物件，據說是最初創造時的bug，但使用率太高，經評估被認為不適合修改，否則影響太大

      let empty = null
    

  • key-pair value(鍵值配對的組合)

      // 創一個物件
      const personalData = {
      name: "Julia"
      gender: "female"
      }
      // 其中左邊name & gender為key值，又稱物件的屬性(property)，
      // 右邊Julia跟female則為value值
    

      // 物件屬性的存取
      personalData.name //用小數點符號存取
      personalData["name"] //用中括號存取，屬性名稱須以字串表示
    

• 陣列(array)

// 創造一個陣列
const groceryItem = ["apple", "banana", "cake"]

// 存取陣列的元素
console.log(groceryItem[0]);//"apple"
console.log(groceryItem[1]);//"banana"

// 存取陣列的長度
console.log(groceryItem.length);//3

強制轉型coercion

• 轉為字串
  • 明確轉型：String(2)
  • 隱含轉型：2+''
• 轉為布林值
  • 明確轉型：Boolean(2)
  • 隱含轉型：!!2 //邏輯運算子觸發; if(a=2){...} //if 或while判斷式的條件區塊觸發
• 轉為數值
  • 明確轉型：
    • Number('2') //2
    • Number('true') //1
    • Number('false') //0
    • Number('null') //0
    • Number('12s') //NaN
    • Number('undefined') //NaN
  • 隱含轉型：透過運算子觸發
    • 大，小於運算子（>, <, >=, <=）
    • 算數運算子（＋ , - , * , / , % ):除加法如算式內含字串的值， 依JavaScript規則會將算式內所有值轉為字串外，其他運算子皆會觸發數字類型的隱含轉型
    • 在任一其他類型的數值前使用加法運算子觸發轉型,ex:+'2'
    • 寬鬆的數值比較（== , !=）

物件的強制轉型

• 當物件與運算子一起使用時，物件需先轉純值，才能運算，得出結果
• 物件轉布林值：任何非純值的數值都會被轉成true
• 物件轉字串或數值：會進入ToPrimitive的流程，如果JavaScript認為該物件應轉為字串，就會先呼叫toString，再呼叫valueOf；反之，就先呼叫valueOf，再呼叫toString，看哪一個方法呼叫後可得到純值，就停止整個流程
  • ToPrimitive
    • toString：物件轉字串
    • valueOf：物件轉數值

布林值的Truthy value & Falsy value

• Falsy value：以下這些值轉為布林值後，一定會判定為false
  • 0
  • NaN
  • ' '(空字串)
  • False
  • null
  • undefined
• Truthy value：除了Falsy value外的值都屬於Truthy value

心得

型別不難理解，強制轉型則需要一點腦力，我的理解是，Javascript就像是工作上幫主管處理事情的我們，出自好意，認為自己可以處理的小事就不要驚動高層，但有時就是會有意外，讓主管摸不著頭緒或責怪為什麼沒有知會他，用這樣的角度去體會後就能耐著性子去把它弄懂來，日後越來越上手，相信能與Javascript培養出心照不宣的默契。

參考資料

• 書 JavaScript概念三明治：基礎觀念、語法原理一次帶走！（第二章）

童言童語

努力看完天書後，來點輕鬆的吧！分享我兒子的童言童語，調劑身心一下

5歲樂咖+2歲嗨啾 = 我的神奇寶貝 皮咖啾

2023/07/28
今天表弟來家裡玩，不小心撞到阿咖。
表弟道歉，阿咖直接略過⋯
爸爸：欸人家跟你說對不起，你應該回什麼？
咖ㄧ臉不爽：下次不要再這樣囉！